<template>
	<div class="darenduibi">
		<div class="darendui" v-if="$store.state.denglu">
			<div class="darendui">
				<table cellpadding="0" cellspacing="0">
					<tr>
						<td>已选择达人</td>
						<td v-for="(item,index) in 4" :key="index">
							<div class="xuanda1">
								<img src="../../../assets/img/ciyun.png" />
							</div>
							<div class="xuanda2">
								<p>
									<span>乐乐猫</span>
									<img v-if="$store.state.luyoushu==0" src="../../../assets/img/douyin.png" />
									<img v-if="$store.state.luyoushu==1" src="../../../assets/img/kuaishou.png" />
									<img v-if="$store.state.luyoushu==2" src="../../../assets/img/bibi.png" />
									<img v-if="$store.state.luyoushu==3" src="../../../assets/img/weibo.png" />
									<img v-if="$store.state.luyoushu==4" src="../../../assets/img/xiaohongshu.png" />
								</p>
								<p>
									粉丝数：815.0万
								</p>
							</div>
						</td>
					</tr>
					<tr>
						<th>
							<span>基础信息</span>
						</th>
					</tr>
					<tr>
						<td>深码指数</td>
						<td>762</td>
						<td>453</td>
						<td>235</td>
						<td>563</td>
					</tr>
					<tr>
						<td>平台排名</td>
						<td>435</td>
						<td>965</td>
						<td>345</td>
						<td>567</td>
					</tr>
					<tr>
						<td>平台认证</td>
						<td>优质视频创作者</td>
						<td>佛山人民广播电台花生fm主持人</td>
						<td>优质视频创作着</td>
						<td>优质视频创作着</td>
					</tr>
					<tr>
						<td>性别</td>
						<td>女</td>
						<td>男</td>
						<td>未知</td>
						<td>女</td>
					</tr>
					<tr>
						<td>所在地</td>
						<td>-</td>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>标签</td>
						<td>小姐姐</td>
						<td>-</td>
						<td>唱歌、小姐姐、音乐</td>
						<td>唱歌</td>
					</tr>
					<tr>
						<td>粉丝总数</td>
						<td>{{zan | guolv}}</td>
						<td>{{zan | guolv}}</td>
						<td>{{zan | guolv}}</td>
						<td>{{zan | guolv}}</td>
					</tr>
					<tr>
						<td>近30天粉丝增量<i style="margin-left:0.3rem ;color: #666;" class="el-icon-question"></i></td>
						<td>{{fenzeng | guolv}}</td>
						<td>{{fenzeng | guolv}}</td>
						<td>{{fenzeng | guolv}}</td>
						<td>{{fenzeng | guolv}}</td>
					</tr>
					<tr>
						<td>粉丝质量<i style="margin-left:0.3rem ;color: #666;" class="el-icon-question"></i></td>
						<td>44</td>
						<td>87</td>
						<td>13</td>
						<td>54</td>
					</tr>
				</table>
			</div>
		</div>
		
		<jinzhi :wenben="wenben" v-else></jinzhi>
	</div>
</template>

<script>
	import jinzhi from "@/components/components/jinzhiye.vue"
	export default{
		name:"darenduibi",
		components:{
			jinzhi
		},
		data(){
			return{
				wenben:'从内容类型、数据表现、粉丝画像等维度全面分析达人粉丝，揭示粉丝商业价值，为制定最优化传播策略提供决策依据。',
				zan:45656651,
				fenzeng:231234,
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted() {
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			// console.log(this.$store.state.luyoushu,"luyoushu")
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.darenduibi{
		
		.darendui{
			background-color: #fff;
			border-radius:0.1rem ;
			padding: 0.8rem;
			
			table{
				width: 100%;
				color: #666;
				
				tr:hover{
					background-color: #F1F4FB;
				}
				
				td{
					padding: 0.3rem 0.6rem;
					box-sizing: border-box;
					padding-top:0.6rem ;
					padding-bottom:0.6rem ;
					color: #666666;
					font-size: 0.45rem;
				}
				
				tr{
					td:nth-of-type(1){
						background-color: #F1F4FB;
					}
				}
				
				tr:not(:first-child){
					td:nth-of-type(1){
						border-bottom:1px solid #fff ;
					}
					td:not(:first-child){
						text-align: center;
						font-size: 0.4rem;
					}
				}
				
				tr:nth-of-type(1){
					td{
						color: #666666;
						font-size: 0.45rem;
						
						.xuanda1{
							float: left;	
							img{
								width: 1.5rem;
								height: 1.5rem;
								border-radius:50% ;
							}
						}
						.xuanda2{
							margin-left:0.4rem ;
							float: left;
							p:nth-of-type(1){
								display: flex;
								justify-content: space-between;
								align-items: center;
								span{
									text-align: left;
									font-size: 0.4rem;
								}
								img{
									width: 0.4rem;
								}
							}
							p:nth-of-type(2){
								font-size: 0.4rem;
								margin-top:0.5rem ;
							}
						}
					}
				}
				
				tr:nth-of-type(2){
					th{
						text-align: left;
						position: relative;
						span{
							font-size: 0.45rem;
							display: block;
							box-sizing: border-box;
							padding: 0.6rem 0;
							padding-left:0.6rem ;
						}
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.6rem;
							left: 0rem;
							height: 0;
							width: 0.1rem;
							height: 0.6rem;
							background-color: #1890FF;
						}
					}
				}
				
				tr:nth-of-type(3){
					td:not(:first-child){
						color: #0091FF;
						font-size: 0.4rem;
					}
				}
				
				tr:nth-of-type(4){
					td:not(:first-child){
						color: #FF8500;
						font-size: 0.4rem;
					}
				}
				
			}
		}
		
	}
</style>
